<template>
	<view class="view">
		<view class="row">
			<view>收货人</view>
			<input v-model="data.name" type="text" placeholder="请填写收货人姓名" />
		</view>
		<view class="row">
			<view>手机号</view>
			<input v-model="data.phone" type="number" placeholder="请填写收货人手机号码" />
		</view>
		<view class="row" @tap="openAddres()">
			<view>所在地区</view>
			<view class="select-value" :class="pickerText ? '' : 'placeholder'">{{pickerText || '请选择'}}</view>
			<image src="/static/images/ic_next.png"></image>
		</view>
		<view class="textarea">
			<textarea v-model="data.address" placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等"></textarea>
		</view>
		<view class="row">
			<view>设为默认地址</view>
			<view style="flex: 1;"></view>
			<switch :checked="data.isDefault == 1" @change="changeDefault"></switch>
		</view>
		<view class="bottom">
			<view class="btn" @click.stop="saveAddress">保存地址</view>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#32C59A"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';

	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				id: null,
				data: {
					userId: uni.getStorageSync('userInfo').id,
					name: null,
					phone: null,
					provinceId: null,
					provinceName: null,
					cityId: null,
					cityName: null,
					areaId: null,
					areaName: null,
					address: null,
					isDefault: 1
				},
				cityPickerValueDefault: [0, 0, 0],
				pickerText: ''
			};
		},
		onLoad(options) {
			this.id = options.id;
			if (this.id) {
				uni.setNavigationBarTitle({
					title: '编辑地址'
				});
			}
			this.init();
		},
		methods: {
			init() {
				if (this.id) {
					this.$api.http('/user/userAddress/details', 'GET', {
						addressId: this.id
					}, res => {
						if (res.data.code == 200) {
							this.data = res.data.result;
							this.pickerText = this.data.provinceName + ',' + this.data.cityName + ',' + this.data
								.areaName;
						} else {
							this.$Toast(res.data.message || '请求失败，请重试！');
						}
					})
				}
			},
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.cityPickerValueDefault = e['value'];
				let arr = e['labelArr'];
				this.pickerText = arr.join(',');
				this.data.provinceId = e['provinceCode'];
				this.data.provinceName = arr[0];
				this.data.cityId = e['cityCode'];
				this.data.cityName = arr[1];
				this.data.areaId = e['areaCode'];
				this.data.areaName = arr[2];
			},
			changeDefault(e) {
				this.data.isDefault = e.target.value ? 1 : 0;
			},
			saveAddress() {
				if (!this.data.name) {
					return this.$Toast('请填写收货人姓名');
				}
				if (!this.data.phone) {
					return this.$Toast('请填写收货人手机号码');
				}
				if (!this.data.address) {
					return this.$Toast('请填写详细地址');
				}
				if (!this.pickerText) {
					return this.$Toast('请选择地区');
				}
				if (this.id) {
					this.$api.http('/user/userAddress/update', 'POST', this.data, res => {
						if (res.data.code == 200) {
							uni.navigateBack();
						} else {
							this.$Toast(res.data.message || '修改失败，请重试！');
						}
					})
				} else {
					this.$api.http('/user/userAddress/add', 'POST', this.data, res => {
						if (res.data.code == 200) {
							uni.navigateBack();
						} else {
							this.$Toast(res.data.message || '添加失败，请重试！');
						}
					});
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.view {

		.row {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 1rpx;
			padding: 20rpx 30rpx;
			font-size: 28rpx;
			background-color: #FFFFFF;

			view {
				flex-shrink: 0;
				width: 200rpx;
			}

			input {
				flex: 1;
			}

			image {
				width: 20rpx;
				height: 35rpx;
			}

			.select-value {
				flex: 1;
				padding: 8upx 0;
				font-size: 28upx;

				&.placeholder {
					color: #777777;
				}
			}
		}

		.textarea {
			padding: 20rpx 30rpx;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			font-size: 28rpx;
		}

		.bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;

			.btn {
				margin: 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				background-color: #32C59A;
			}
		}
	}
</style>